<template>
  <div class="index">
    <div>
      <fillView ref="fillView">
        <div class="card-list flex flexR center">
          <card v-for="(item,index) in cardList" v-bind:key="index" :item="item"></card>
        </div>
      </fillView>
    </div>
    <!-- 新增托运单  可疑托运单 -->
    <div class="flex flexR booking_note">
      <div :style="{width:bookingNoteStyle+'px'}">
        <viewTitle :title="'今日新增托运单'" :button="false" :btitle="'更多'" :redirect_path="'logistics_list'"></viewTitle>
        <div>
          <el-table
              :data="todayOrder"
              style="width: 100%; max-width:none"
              :header-cell-style="getRowClass"
              :fit="true"
              :lazy="true"
              max-height="450"
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="logistics_no" label="托运单号"></el-table-column>
            <el-table-column prop="company_name" label="承运物流企业"></el-table-column>
            <el-table-column :formatter="(row) => {return  '邵东-' + row.region_name}" label="送达站点"></el-table-column>
            <el-table-column label="操作" fixed="right" width="auto">
              <div class="table_operation" slot-scope="scope">
                <el-button @click="getOrderDetail(scope.row.logistics_id)">详情</el-button>
              </div>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div :style="{width:bookingNoteStyle+'px'}">
        <viewTitle :title="'可疑托运单'" :button="false" :btitle="'更多'" :redirect_path="'dubious_logistics'"></viewTitle>
        <div>
          <el-table
              :data="dubiousOrder"
              style="width: 100%; max-width:none"
              :header-cell-style="getRowClass"
              :fit="true"
              :lazy="true"
              max-height="450"
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="logistics_no" label="托运单号"></el-table-column>
            <el-table-column prop="company_name" label="承运物流企业"></el-table-column>
            <el-table-column :formatter="(row) => {return  '邵东-' + row.region_name}" label="送达站点"></el-table-column>
            <el-table-column label="操作" fixed="right" width="auto">
              <div class="table_operation" slot-scope="scope">
                <el-button @click="getOrderDetail(scope.row.logistics_id)">详情</el-button>
              </div>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 物流线路图 -->
    <fillView :padding="0">
      <div class="line-top flex flexR center">
        <viewTitle :title="'物流线路图'"></viewTitle>
        <div class="dataMap">
          <span>物流服务线路</span>
          <span>{{tansline_count}} 条</span>
        </div>
      </div>
      <!-- 地图展示 -->
      <div class="map-show flex flexR">
        <div class="map-show-left">
          <iframe src="/static/map.html" frameborder=0 name="showHere" scrolling=auto width="100%"
                  height="310px"></iframe>
        </div>
        <div class="map-show-list flex flexC center">
          <div class="map-show-item flex flexC">
            <div class="map-show-item-title">覆盖城市</div>
            <div class="map-show-item-num">
              <span>{{city_count}}</span>
              <span>个</span>
            </div>
          </div>
          <div class="map-show-item flex flexC">
            <div class="map-show-item-title">覆盖省份</div>
            <div class="map-show-item-num map-show-item-num1">
              <span>{{province_count}}</span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
    </fillView>
  </div>
</template>

<script>
	export default {
		data() {
			return {
				todayOrder: [],     // 今日订单
				dubiousOrder: [],     //可疑订单
				cardList: [
					{
						title: "物流企业",
						num: "0",
						bk: "#60B8F6",
						route: "/company_list",
					},
					{
						title: "从业人员",
						num: "0",
						bk: "#FE787A",
						route: "/employee_list",
					},
					{
						title: "寄件人员",
						num: "0",
						bk: "#36CBCB",
						route: "/member_list",
					},
					{
						title: "累计托运单",
						num: "0",
						bk: "#FBBB6E",
						route: "/logistics_list",
					},
					{
						title: "今日新增托运单",
						num: "0",
						bk: "#6763FF",
						route: "/logistics_list?today=1"
					},
					{
						title: "可疑托运单",
						num: "0",
						bk: "#3CBB92"
					}
				],
				bookingNoteStyle: 0,
				mapList: [],
				tansline_count: 0,    //物流服务线路条数
				province_count: 0,    //覆盖省份数
				city_count: 0,    //覆盖城市数
				lineList: [],
				SHOW: false
			};
		},
		methods: {
			//    修改第一行样式
			getRowClass({row, column, rowIndex, columnIndex}) {
				if (rowIndex === 0) {
					return "background: #FAFAFA ";
				} else {
					return "";
				}
			},
			// 调用首页接口
			getData() {
				this.$raxios.post(this.$mapapi.welcome, {}).then(res => {
					if (res.code === 200) {
						this.cardList[0].num = res.data.company_count;   //企业数量
						this.cardList[1].num = res.data.employee_count;   //从业人员数量
						this.cardList[2].num = res.data.member_count;   //寄件人员数量
						this.cardList[3].num = res.data.logistic_total_count;   //累计托运单数量
						this.cardList[4].num = res.data.logistic_today_count;   //今日新增托运单数量
						this.cardList[5].num = res.data.logistic_dubious_count;   //可疑托运单数量

						this.todayOrder = res.data.logistic_today_list;
						this.dubiousOrder = res.data.logistic_dubious_list;
						this.tansline_count = res.data.tansline_count;
						this.province_count = res.data.province_count;
						this.city_count = res.data.city_count;

						//地图线路显示
						if (res.data.tansline_map.length) {
							for (let val of res.data.tansline_map) {
								this.lineList.push([val.start_city_l, val.end_city_l]);
								this.mapList.push({option: val.start_city_l, title: val.start_city, content: ''});
								this.mapList.push({option: val.end_city_l, title: val.end_city, content: ''});
							}
						}
					}else{
						this.$message.error(res.msg)
          }
				}).catch(res => {
					this.$message.error(res.msg || '服务繁忙请稍后再试');
				});
			},
			//获取托运单详情
			getOrderDetail(logistics_id) {
				this.$toRoutePath({
					path: "/logistics_list/logistics_list_detail",
					edit: true,
					query: {logistics_id: logistics_id}
				});
			}
		},
		mounted() {
			this.getData();

			setTimeout(() => {
				this.SHOW = true;
			}, 1000);
			setTimeout(() => {
				let fillView_width = this.$refs.fillView.$el.offsetWidth - 10;
				this.bookingNoteStyle = fillView_width / 2;
			}, 50);
		},
		created() {
		}
	};
</script>

<style lang="less" scope="true" src="@/style/home/index.less"></style>
